<template lang="pug">
	.hospital-item-wrap(@click="itemClick")
		.hospital-icon
			img(:src="item.orgIconUrl?item.orgIconUrl:defaultHead")
		.hospital-content
			.title {{item.orgName}}
			.department 特色科室：{{item.regDeptName}}
			.sub
				.sub-item
					img(src="../../assets/image/bespeak/hospitalIcon.png")
					span {{item.levelText}}
				.sub-item(v-if="item.distance")
					img(src="../../assets/image/bespeak/locationIcon.png")
					span {{item.distance}}
			.recent(v-if="item.isRecent") 近期预约

</template>

<script>
import defaultHead from '@/assets/image/common/background_hos_s.png'
export default {
	name: 'hospital-item',
	data() {
		return {
			defaultHead: defaultHead
		}
	},
	props: {
		item: {
			type: Object,
			default: () => {}
		}
	},
	created() {},
	mounted() {},
	methods: {
		itemClick() {
			this.$emit('listenClick')
		}
	}
}
</script>

<style lang="stylus">
.hospital-item-wrap
	display flex
	align-items center
	shadowBox()
	margin mainMargin
	padding mainPadding
	.hospital-icon
		width 188px
		height 150px
		border-radius 8px
		overflow hidden
		img
			width 100%
			height 100%
	.hospital-content
		flex 1
		position relative
		margin-left 24px
		.title
			font-size 30px
			font-weight 500
			color blackFontColor1A
			line-height 44px
			padding-bottom 20px
			white-space nowrap
			overflow hidden
			text-overflow ellipsis
			max-width 438px
		.department,.sub-item
			font-size 24px
			color #aaa
			line-height 34px
		.sub
			display flex
			align-items center
			padding-top 12px
			.sub-item
				margin-right 24px
				display flex
				align-items center
				img
					width 28px
					height 28px
					margin-right 4px
		.recent
			width 108px
			height 32px
			background rgba(255,249,239,1)
			border-radius 18px
			border 1px solid rgba(253,175,61,1)
			font-size 20px
			color rgba(253,175,61,1)
			text-align center
			position absolute
			bottom 0
			right 0

</style>
